<template>
    <div >
        <div class="toast" v-if="isShow">
            {{message}}
        </div>
    </div>
</template>
<script>
export default {
    name:"ToastLoad",
    data(){
        return{
            message:"",
            isShow:false
        }
    },
    methods:{
        show(msg,duration){
            this.isShow = true
            this.message = msg
            setTimeout(()=>{
                this.isShow = false
                this.message = ''
            },duration)
        }
    }
    
}
</script>

<style lang="scss" scoped>
.toast{
    width: 340px;
    padding:10px 13px;
    height: auto;
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
    background: rgba(0,0,0,.6);
    font-size: 18px;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10000;
}
</style>